<template>
	<div class="contents">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="全部" name="first" />
			<el-tab-pane label="待运营审核" name="second" />
			<el-tab-pane label="待供应商审核" name="three" />
		</el-tabs>
		<el-form class="demo-form-inline" :inline="true" :model="dataFilter">
			<!-- <el-form-item>
		    <el-select v-model="dataFilter.source" placeholder="选择退货来源" clearable>
		    	<el-option v-for="item in optorigin" :key="item.value" :label="item.label" :value="item.value" />
		    </el-select>
		  </el-form-item>
		  <el-form-item>
		    <el-select v-model="dataFilter.timeCategory" placeholder="选择日期类型" clearable>
		    	<el-option v-for="item in applySel" :key="item.value" :label="item.label" :value="item.value" />
		    </el-select>
		  </el-form-item>
		  <el-form-item>
		    <el-date-picker v-model="dataFilter.time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
		    </el-date-picker>
		  </el-form-item>
		  <el-form-item>
		    <goods-type @selectType="changeType"></goods-type>
		  </el-form-item> -->
			<el-form-item>
				<el-input class="writeWidth" v-model="dataFilter.order_no" placeholder="输入客户名称/输入客户账号/退货单号/源订单号"
					clearable>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" @click="getList">搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- <div style="padding: 16px 0; ">
			<el-button plain @click="gocreate">新增</el-button>
		</div> -->
		<el-table :data="tableData.list" style="width: 100%; margin-top: 8px" v-loading="listLoading" class="resetTab">
			<el-table-column label="退货单号" prop="no" width="200"/>
			<el-table-column label="订单号" prop="order_no" width="200" v-if="roles != 'supplier'">
				<template slot-scope="scope">
					<span class="no_Code" @click="goDetails(scope.row)">{{scope.row.order_no}}</span>
				</template>
			</el-table-column>
			<el-table-column label="名称" prop="product_name" />
			<el-table-column label="退货商品图片" width="180" class-name="table_img">
				<template slot-scope="scope">
					<div v-for="(item,index) in scope.row.photoes" :key="index">
						<el-image :src="item.path" style="width: 50px; height: 50px;" :preview-src-list="[item.path] " />
					</div>
				</template>
			</el-table-column>
			<el-table-column label="退货申请时间" prop="ctime" width="180" :formatter="formatter" />
			<el-table-column label="退货数量" prop="qty" />
			<el-table-column prop="price" label="类型价(元)" v-if="roles != 'supplier'"  width="120">
				<template slot-scope="scope">
					{{ scope.row.price | filterMoney }}
				</template>
			</el-table-column>
			<el-table-column prop="price" label="类型价总金额(元)" v-if="roles != 'supplier'"  width="150">
				<template slot-scope="scope">
					{{ scope.row.subtotal | filterMoney }}
				</template>
			</el-table-column>
			<el-table-column prop="price" label="市场价(元)" width="120" v-if="roles != 'customer'">
				<template slot-scope="scope">
					{{ scope.row.shelf_price | filterMoney }}
				</template>
			</el-table-column>
			<el-table-column  label="市场价总金额(元)" width="160" v-if="roles != 'customer'">
				<template slot-scope="scope">
					{{ scope.row.qty * scope.row.shelf_price | filterMoney }}
				</template>
			</el-table-column>
			<el-table-column prop="" label="退货申请原因" show-overflow-tooltip width="150">
				<template slot-scope="scope">
					<div class="line-limit-length">
			 		{{scope.row.remarks}}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="退货发起人" prop="initiator" width="120"/>
			<el-table-column label="售后订单状态" width="180">
				<template slot-scope="scope">
					<div style="display: flex;align-items: center;">
						<p slot="reference">{{
							scope.row.status == 1
							? '待运营审核'
							: scope.row.status == 2
							? '已完成'
							: scope.row.status == 3
							? ''
							: scope.row.status == 4
							? ''
							: scope.row.status == 5
							? ''
							: scope.row.status == 6
							?'运营审核不通过'
							: scope.row.status == 7
							? '待供应商审核'
							: scope.row.status == 8
							? '供应商审核通过'
							: scope.row.status == 9
							? '供应商审核不通过'
							: scope.row.status == 10
							? '待运营再次审核'
							: scope.row.status == 11
							?'运营再次审核不通过':''
								}}</p> 
						<tooltip-msg :messages="scope.row.operate_reject" place="right"  v-if="scope.row.status == 6"/>
						<tooltip-msg :messages="scope.row.remarks_reject " place="right" v-if="scope.row.status == 9"/>
						<tooltip-msg :messages="scope.row.operate_reject2" place="right" v-if="scope.row.status == 11"/>
					</div>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="280" prop="zip">
				<template slot-scope="scope">
					<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,7)"
						v-if="matchShelves(scope.row.status)">
						审核通过
					</el-button>
					<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,10)"
						v-if="matchShelves(scope.row.status)">
						审核不通过
					</el-button>
					<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,8)"
						v-if="match(scope.row.status)">
						审核通过
					</el-button>
					<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,9)"
						v-if="match(scope.row.status)">
						审核不通过
					</el-button>
					<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,7)"
						v-if="again(scope.row.status)">
						运营再次审核通过
					</el-button>
					<el-button slot="reference" size="mini" type="text" @click="assignment(scope.row,11)"
						v-if="again(scope.row.status)">
						运营再次审核不通过
					</el-button>
					<!-- <el-popconfirm title="是否确定本订单？" @confirm="handleEdit(scope.row,2)" v-if="scope.row.status == 1">
						<el-button slot="reference" size="mini" type="text"
							v-permissions="['Admin','business','supplier']">
							同意
						</el-button>
					</el-popconfirm>
					<el-popconfirm title="是否拒绝本订单？" @confirm="refused(scope.row,6)" v-if="scope.row.status == 1">
						<el-button slot="reference" size="mini" type="text"
							v-permissions="['Admin','business','supplier']">
							拒绝
						</el-button>
					</el-popconfirm>
					<el-popconfirm title="是否确定发货？" @confirm="handleEdit(scope.row,3)" v-if="scope.row.status == 2">
						<el-button slot="reference" size="mini" type="text"
							v-permissions="['Admin','purchase','customer']" >
							发货
						</el-button>
					</el-popconfirm>
					<el-popconfirm title="是否确定收货？" @confirm="handleEdit(scope.row,4)" v-if="scope.row.status == 3">
						<el-button slot="reference" size="mini" type="text"
							v-permissions="['Admin','business','supplier']">
							确认收货
						</el-button>
					</el-popconfirm>
					<el-popconfirm title="是否取消退货？" @confirm="handleEdit(scope.row,6)" v-if="scope.row.status == 1">
						<el-button slot="reference" size="mini" type="text"
							v-permissions="['Admin','business','supplier','purchase','customer']">
							取消退货
						</el-button>
					</el-popconfirm> -->
				</template>
			</el-table-column>
		</el-table>
		<!-- <div class="total-info">
			<span>退货金额小计:0.00</span>
			<span>应退金额小计:0.00</span>
		</div> -->
		<el-dialog title="退货订单确认" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="数量" :label-width="formLabelWidth">
					<el-input v-model="form.signForQty" type='number' autocomplete="off" placeholder="请输入收到退货数量"
						style="flex: 1;"></el-input>
				</el-form-item>
				<el-form-item label="价格" :label-width="formLabelWidth">
					<el-input v-model="form.signForPrice" type='number' autocomplete="off" placeholder="请输入退货价格">
					</el-input>
				</el-form-item>
				<el-form-item :label-width="formLabelWidth" style="text-align: right;">
					<span>总额：{{form.SignForSubTotal}}</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="mackOrder">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 供应商审核不通过 -->
		<el-dialog title="审核不通过原因" :visible.sync="dialog">
			<el-form :model="form">
				<el-form-item label="审核不通过原因" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="refuseReason" placeholder="请输入审核不通过原因"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialog = false">取 消</el-button>
				<el-button type="primary" @click="mackRefused">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 运营审核不通过 -->
		<el-dialog title="审核不通过原因" :visible.sync="dialogTwo">
			<el-form>
				<el-form-item label="审核不通过原因" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="refuseReasonTwo" placeholder="请输入审核不通过原因"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTwo = false">取 消</el-button>
				<el-button type="primary" @click="mackRefusedTwo">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 运营再次审核不通过 -->
		<el-dialog title="审核不通过原因" :visible.sync="dialogThree">
			<el-form>
				<el-form-item label="审核不通过原因" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="refuseReasonThree" placeholder="请输入审核不通过原因"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogThree = false">取 消</el-button>
				<el-button type="primary" @click="mackRefusedThree">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
			<span>是否确认审核此订单</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="shelves">确 定</el-button>
			</span>
		</el-dialog>
		<el-pagination background @current-change="currentChange" @size-change="sizeChange"
			layout="total, prev, pager, next,sizes" :page-size="tableData.pageSize" :page-sizes="[10,20, 30, 40, 50]"
			:total="tableData.total" />
	</div>
</template>

<script>
	import goodsType from '@/components/goodsType.vue'
	import TooltipMsg from '@/components/TooltipMsg.vue'
	import { getOrderList, detailOrder, exportOrder, getDelivery, getRurnList, modify } from '@/api/order'
	export default {
		inject: ['reload'],
		components: {
			goodsType,
			TooltipMsg
		},
		data() {
			return {
				dialogFormVisible: false,
				dialogVisible: false,
				ginseng: '',
				parameter: {},
				dialog: false,
				dialogTwo: false,
				dialogThree:false,
				roles: '',
				tableData: [],
				listLoading: true,
				refuseReason: '',
				refuseReasonTwo: '',
				refuseReasonThree:'',
				refuseId: 0,
				form: {
					signForPrice: '',
					signForQty: '',
					SignForSubTotal: 0,
					SignTime: '',
				},
				formLabelWidth: '120px',
				dataFilter: {
					wis_id: '1',
					size: 10,
					current: 1,
					status: '',
					source: '',
					time: '',
					timeCategory: '',
					customer_id: '',
					order_no: '',
					seq:2
				},
				activeName: 'first',
				stashow: true,
				optorigin: [{
						value: '全部',
						label: '全部',
					},
					{
						value: '后台',
						label: '后台',
					},
					{
						value: '微信公众号',
						label: '微信公众号',
					},
					{
						value: 'PC商城',
						label: 'PC商城',
					},
					{
						value: '商城APP',
						label: '商城APP',
					},
					{
						value: '小程序',
						label: '小程序',
					},
					{
						value: 'OpenApi',
						label: 'OpenApi',
					},
					{
						value: '支付宝服务号',
						label: '支付宝服务号',
					},
					{
						value: 'PC集团',
						label: 'PC集团',
					},
				],
				statusList: [{
						value: '1',
						label: '待处理',
					},
					{
						value: '2',
						label: '已完成',
					},
					{
						value: '3',
						label: '已关闭',
					},
				],
				value: '',
				applay: '申请日期',
				applySel: [{
						value: '0',
						label: '申请日期',
					},
					{
						value: '1',
						label: '发货日期',
					},
				],
				returnData: [],
				value1: ''
			}
		},
		created() {
			this.getList()
			this.roles = this.$store.state.user.roles
		},
		filters: {
			filterMoney(num) {
				return (num / 100).toFixed(2)
			}
		},
		computed: {
			number() {
				const { signForQty, signForPrice } = this.form;
				return {
					signForQty,
					signForPrice
				}
			}
		},
		watch: {
			number(val, e) {
				this.form.SignForSubTotal = val.signForQty * val.signForPrice
			}
		},
		methods: {
			goDetails(item) {
				this.$router.push({ path: '/order/editor', query: { id: item.order_id,refer:1} })
			},
			matchShelves(e) {
				if (this.roles == 'Admin' || this.roles == 'CustomerService') {
					if (e == 1) {
						return true
					}
				}
			},
			again(e) {
				if (this.roles == 'Admin' || this.roles == 'CustomerService') {
					if (e == 10) {
						return true
					}
				}
			},
			match(e) {
				if (this.roles == 'Admin' || this.roles == 'supplier') {
					if (e == 7) {
						return true
					}
				}
			},
			assignment(e, a) {
				this.ginseng = a
				this.parameter = JSON.parse(JSON.stringify(e))
				if (a == 9) {
					this.dialog = true
				} else if (a == 10) {
					this.dialogTwo = true
				} else if (a == 11){
					this.dialogThree = true
				}else {
					this.dialogVisible = true
				}
			},
			shelves() {
				this.handleEdit(this.parameter, this.ginseng)
			},
			formatter(row, column) {
				let time = row.ctime * 1000
				var date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = date.getDate() + ' '
				var h = date.getHours() + ':'
				var m = date.getMinutes() + ':'
				var s = date.getSeconds()
				return Y + M + D + h + m + s
			},
			refused(e) {
				this.refuseId = e.id
				this.dialog = true
			},
			async handleEdit(e, index) {
				let res = await modify({
					id: e.id,
					status: index
				})
				if (res.status == '200') {
					this.$message.success('操作成功')
					this.dialogVisible = false
					this.getList()
					// this.reload();
				} else {
					this.$message(res.message)
				}
			},
			async mackOrder() {
				let e = JSON.parse(sessionStorage.getItem('returnList'))
				if (this.form.signForQty > e.qty) {
					this.$message.error('确认退款数量需小于退货订单数量')
					return false
				}
				if (this.form.signForPrice > e.price) {
					this.$message.error('确认退款金额需小于退货订单金额')
					return false
				}
				let time = this.getNowTime()
				let res = await modify({
					id: e.id,
					status: 4,
					signforPrice: this.form.signForPrice,
					signforQty: this.form.signForQty,
					signforSubTotal: this.form.SignForSubTotal,
					signforTime: time,
				})
				if (res.status == '200') {
					this.$message.success('操作成功')
					this.getList()
					this.dialogFormVisible = false
					// this.reload();
				} else {
					this.$message(res.message)
				}
			},
			async mackRefusedThree() {
				if (this.refuseReasonThree == '') {
					this.$message.error('请填写审核不通过理由')
					return false
				}
				let res = await modify({
					id: this.parameter.id,
					status: 11,
					operateReject2: this.refuseReasonThree
				})
				if (res.status == '200') {
					this.dialogThree = false
					this.$message.success('操作成功')
					this.getList()
					// this.reload();
				} else {
					this.$message(res.message)
				}
			},
			// 运营审核原因
			async mackRefusedTwo() {
				if (this.refuseReasonTwo == '') {
					this.$message.error('请填写审核不通过理由')
					return false
				}
				let res = await modify({
					id: this.parameter.id,
					status: 6,
					operateReject: this.refuseReasonTwo
				})
				if (res.status == '200') {
					this.dialogTwo = false
					this.$message.success('操作成功')
					this.getList()
					// this.reload();
				} else {
					this.$message(res.message)
				}
			},
			//运营商审核
			async mackRefused() {
				if (this.refuseReason == '') {
					this.$message.error('请填写审核不通过理由')
					return false
				}
				let res = await modify({
					id: this.parameter.id,
					status: 9,
					remarksReject: this.refuseReason
				})
				if (res.status == '200') {
					this.dialog = false
					this.$message.success('操作成功')
					this.getList()
					// this.reload();
				} else {
					this.$message(res.message)
				}
			},
			getNowTime() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var time = date.getFullYear() + seperator1 + month + seperator1 + strDate +
					" " + date.getHours() + seperator2 + date.getMinutes() +
					seperator2 + date.getSeconds();
				return time;
			},
			async getList() {
				this.listLoading = true
				const res = await getRurnList(this.dataFilter)
				this.tableData = res
				// this.tableData.list = res.list.map(e => {
				// 	e.price = e.price / 100
				// 	e.subtotal = e.subtotal / 100
				// 	return e
				// })
				// console.log(this.tableData, '111111111')
				this.listLoading = false
			},
			changeType(data) {
				this.dataFilter.customer_id = data[1]
			},
			currentChange(e) {
				this.dataFilter.current = e
				this.getList()
			},
			sizeChange(e) {
				this.dataFilter.size = e
				this.getList()
			},
			handleClick(tab) {
				if (tab.name == 'third' || tab.name == 'fourth') {
					this.stashow = false
				} else {
					this.stashow = true
				}

				if (tab.index == '0') {
					this.dataFilter.status = null
				} else if (tab.index == '2') {
					this.dataFilter.status = 7
				} else {
					this.dataFilter.status = tab.index
				}
				this.getList()
			},
		},
	}
</script>
<style >
	.table_img .cell {
		display: flex !important;
		flex-wrap: wrap !important;
	}
</style>
<style lang="scss" scoped>
	.contents {
		padding: 0 20px 10px;

		.total-info {
			margin: 10px 0;
			color: #505050;
		}
		.no_Code{
			color:#1890ff;
			cursor: pointer;
		}
	}

	.el-pagination {
		text-align: right !important;
	}

	.line-limit-length {
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
